import React, { useEffect } from 'react'

import { useNavigate, useParams } from 'react-router-dom';
import { Button, Card, Form, Input ,message } from 'antd';

//引入样式
import style from '../index.module.css'

//引入参数类型
import { addHospitalParamsType } from '@api/hospital/model/hospitalSetTypes'

//引入添加医院请求
//引入更新医院请求
import { addHospitalRequest, getHosSetItemFromIdRequest, setHosSetItemFromIdRequest } from '@api/hospital/hospitalSet'

export default function AddOrUpdateHosSet() {

  const [form] = Form.useForm()
  //点击修改时用navigate接收当前点击的那行数据的id
  const { id } = useParams()
  console.log(id, 'id');

  //根据id发送请求获取当前行的信息,由于组件复用,只需要在传入了id时才需要请求数据
  useEffect(() => {
    if (id) {
      const getHosSetItemFromId = async () => {
        const result = await getHosSetItemFromIdRequest(id)
        console.log(result, 'result');

        //根据id把当前行的数据添加到表单中
        form.setFieldsValue(result)


      }
      getHosSetItemFromId()
    }
  }, [id])

  const navigate = useNavigate()

  //1.点击添加时提交表单逻辑
  

  const addHospitalHandle = async (FieldValue: addHospitalParamsType) => {
    console.log(FieldValue);
  
   if(id){
    await setHosSetItemFromIdRequest({ ...FieldValue, id })
    navigate("/syt/hospital/hospitalSet")
    //更新,删除,添加医院后弹出全局提示框
    message.success('更新医院成功')
   }else{
    await addHospitalRequest(FieldValue)
    navigate("/syt/hospital/hospitalSet")
    message.success('添加医院成功')
   }
    //添加数据后不需要返回值
   
    //添加后返回原来的页面 

  }

  //2.给返回添加点击事件
  const gobackHandle = () => {
    navigate(-1)
  }


  return (
    <Card>
      <Form
        form={form}
        name="basic"
        labelCol={{
          span: 3,
        }}
        wrapperCol={{
          span: 18,
        }}
        onFinish={addHospitalHandle}
      >
        <Form.Item
          label="医院名称"
          name="hosname"
          rules={[
            {
              required: true,
              message: 'Please input your username!',
            },
          ]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="医院编号"
          name="hoscode"
          rules={[
            {
              required: true,
              message: 'Please input your password!',
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="api基础路径"
          name="apiUrl"
          rules={[
            {
              required: true,
              message: 'Please input your password!',
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="联系人姓名"
          name="contactsName"
          rules={[
            {
              required: true,
              message: 'Please input your password!',
            },
          ]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="联系人手机"
          name="contactsPhone"
          rules={[
            {
              required: true,
              message: 'Please input your password!',
            },
          ]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          wrapperCol={{
            offset: 3,
          }}
        >
          <Button type="primary" htmlType="submit" className={style.mr} >
            保存
          </Button>
          <Button type="default" htmlType="button" onClick={gobackHandle}>
            返回
          </Button>
        </Form.Item>

      </Form>
    </Card>
  );
}


